<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>课堂子页面</title>

		<link rel="stylesheet" href="../css/base.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="..js/local-keys.js"></script>
		<script src="../js/utils.js"></script>

		<style>
				
			.classroom-container {
				width: 100%;
				background-color: #FFFFFF;
				margin: 0 auto;
				margin-top: 10px;
				padding: 5px;
				padding-right: 3px;				
				position: relative;
				height: 120px;
			}
			
			#leftContent {
				position: absolute;		
			}
			
			#leftContent img {
				height: 100px;
				width: 100px;
			}
			
			#rightContent {
				margin-left: 120px;
				padding-top: 20px;
			}
			.div1{
				background-color: #FFFFFF;
				padding: 5px;
				width: 100%;
			}
			.img1{
				width: 30px;
				vertical-align:middle;
			}
			.img2{
				width: 30px;
				float: right;
				margin: 5px;
			}
			.img3{
				width: 50px;
				margin: 10px;
			}
			.img4{
				width: 30px;
				float: left;
				margin: 5px;
			}
			.span1{
				color: #00d5c5;
				font-size: larger;
			}
			.span2{
				position: absolute;
				margin-top: 100px;
				color: #000000;
				margin-left: 84%;
			}
			.span3{
				float: left;
				line-height: 35px;
			}
			.div2{
				margin-top: 4%;
				background-image: url(../img/background-play.png);
				width: 100%;
				height: 120px;
				background-size: 100% 100%;
				background-repeat:no-repeat;
			}
			.div3{
				width: 100%;
				height: 100%;
				background:#a3a3a3;
				 filter:alpha(Opacity=60);
				 -moz-opacity:0.4;opacity: 0.4;
			}
			.div4{
				width: 95%;
				position: absolute;
				margin-top: 20px;
			}
			.div5{
				background-image: url(../img/play-2.png);
				background-size: 100% 100%;
				background-repeat:no-repeat;
				width: 70px;
				height: 70px;
				margin: 0 auto;
				text-align: center;
			}
			.div6{
				margin-top: 2%;
				width: 100%;
				height: 35px;
			}
			.button1{
				background-color: #00d5c5;
				float: right;
			}
			
		</style>
	</head>

	<body>
		<div class="div1">
			<div>
				<img  class="img1" src="../img/classroom-01.png" />
				<span class="span1">教材</span>
			</div>
		</div>
		<div class="div1">
			<div class="div2">
				<div class="div3">
					<img class="img2" src="../img/download-ok.png" />

					<div class="div4">
						<div class="div5">
							<img class="img3" src="../img/play-1.png" />
						</div>
					</div>
					<span class="span2">44:11</span>
				</div>

			</div>
			<div class="div6">
				<span class="span3">钢琴学前课程准备</span>
				<button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 30</span></button>
			</div>
		</div>

		<div class="div1" style="margin-top: 2%;">
			<div class="div2">
				<div class="div3">
					<img class="img2" src="../img/download-no.png" />

					<div class="div4">
						<div class="div5">
							<img class="img3" src="../img/play-1.png" />
						</div>
					</div>
					<span class="span2">44:11</span>
				</div>

			</div>
			<div class="div6">
				<span class="span3">钢琴成人零基础</span>
				<button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 80</span></button>
			</div>
		</div>

		<div class="classroom-container">
			<div id="leftContent"><img src="../img/play-2.png"></div>
			<div id="rightContent">
				<div style="height: 50px;">
					<span >
					要学习弹钢琴首先要有钱买钢琴jdfgdfhhgfhfghg
				</span>
				</div>
				
				<div >
					<img class="img4" src="../img/download-no.png" />
				    <button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 30</span></button>
				</div>
			</div>
		</div>
		
		
		<div class="div1" style="margin-top: 3%;">
			<div>
				<img class="img1" src="../img/classroom-01.png" />
				<span class="span1">真题PDF教材</span>
			</div>
		</div>

        <div class="classroom-container">
			<div id="leftContent"><img src="../img/play-2.png"></div>
			<div id="rightContent">
				<div style="height: 50px;">
					<span >
					要学习弹钢琴首先要有钱买钢琴jdfgdfhhgfhfghg
				</span>
				</div>
				
				<div >
					<img class="img4" src="../img/download-no.png" />
				    <button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 30</span></button>
				</div>
			</div>
		</div>
		<div class="classroom-container">
			<div id="leftContent"><img src="../img/play-2.png"></div>
			<div id="rightContent">
				<div style="height: 50px;">
					<span >
					要学习弹钢琴首先要有钱买钢琴jdfgdfhhgfhfghg
				</span>
				</div>
				
				<div >
					<img class="img4" src="../img/download-no.png" />
				    <button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 30</span></button>
				</div>
			</div>
		</div>
        
	</body>

</html>